<template>
	<view class="user">
		<div class="top">
			<span></span>
			<span>我的</span>
			<span @click="tuilogin">...</span>
		</div>
		<div class="content">
		<view class="tou">
			<div class="denglu">
				<div class="left">
					<img :src="img" @click="login1" alt="" srcset="">
					<view class="aaaaaa">
						<p @click="login" v-if="!username">请登录</p>
						<p @click="login1" v-if="username">{{username}}	</p>
						<p @click="login1" v-if="username">描述</p>
						<p @click="login1"v-if="!username">登陆解锁更多功能</p>
					</view>
				</div>
				<div class="right">
					<span class="iconfont icon-caidan" @click="login1"></span>
				</div>
			</div>
		</view>
		<div class="nav">
			<div>
				<p><span class="iconfont icon-dingdan"></span></p>
				<p>订单</p>
			</div>
			<div>
				<p><span class="iconfont icon-dingdan"></span></p>
				<p>消息</p>
			</div>
			<div>
				<p><span class="iconfont icon-shoucang"></span></p>
				<p>收藏</p>
			</div>
			<div>
				<p><span class="iconfont icon-zhengzaixue"></span></p>
				<p>在学</p>
			</div>
		</div>
		<ul>
			<li>
				<div class="left"><span class="iconfont icon-youhuiquan"></span><span>我的优惠券</span></div>
				<div class="right"><span class="iconfont icon-youjiantou"></span></div>
			</li>
			<li>
				<div class="left"><span class="iconfont icon-changjianwenti"></span><span>常见问题</span></div>
				<div class="right"><span class="iconfont icon-youjiantou"></span></div>
			</li>
			<li>
				<div class="left"><span class="iconfont icon-shezhi"></span><span>设置</span></div>
				<div class="right"><span class="iconfont icon-youjiantou"></span></div>
			</li>
		</ul>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username:"",
				token:uni.getStorageSync('token'),
				img:""
			}
		},
		methods: {
			login(){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			},
			login1(){
				uni.navigateTo({
					url:"/pages/userInfo/userInfo"
				})
			},
			tuilogin(){
				uni.navigateTo({
					url:'/pages/more/more'
				})
			}
		},
		onShow() {
			this.username=uni.getStorageSync("name")
			this.img=uni.getStorageSync("img")?uni.getStorageSync("img"):"https://img2.baidu.com/it/u=1799451268,1283400252&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1661619600&t=7d98ef74ff39a61d996e1b95ffdd7ac4"
			console.log(this.username);
		}
	}
</script>

<style lang="scss">
	.user{
		width: 100%;
		height: 100%;
		position:relative ;
		.top{
			width: 100%;
			height: 50px;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0 10px;
			line-height: 50px;
			background-color: #5ccc84;
			color: #fff;
		}
		@keyframes content {
			0%{
				transform: translateY(-1000px);
			}
			100%{
				transform: translateY(0px) ;
			}
		}
		.content{
		  animation: content 1s;
		// transform: translateY(-100px);
		.tou{
			width: 100%;
			height: 200px;
			background-color: #5ccc84;
			border-radius: 0px 0px 60px 60px;
			.denglu{
				width: 100%;
				height: 70px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				color: #fff;
				font-size: 16px;
				padding: 0 20px;
				.left{
					display: flex;
					align-items: center;
					img{
						width: 70px;
						height: 70px;
						border-radius: 50%;
					}
					.aaaaaa{
						margin-left: 20px;
					}
				}
			}
		}
		.nav{
			position: absolute;
			top: 170px;
			left: 15px;
			width: 382px;
			height: 77px;
			background-color: #fff;
			display: flex;
			border-radius: 5px;
			box-shadow: 0 0 10px #ccc;
			div{
				width: 25%;
				height: 100%;
				text-align: center;
				font-size: 15px;
				box-sizing: border-box;
				padding-top: 15px;
				p:nth-child(1){
					span{
						font-size: 20px;
						color: #fec829;
					}
				}
			}
		}
		ul{
			padding: 20px;
			box-sizing: border-box;
			width: 100%;
			height: 141px;
			li{
				width: 100%;
				height: 47px;
				// background-color: red;
				box-sizing: border-box;
				padding: 0 30px;
				display: flex;
				line-height: 47px;
				font-size: 15px;
				justify-content: space-between;
				border-bottom: 1px solid #f6f6f6;
				.left{
					span:nth-child(1){
						color: #509ded;
						margin-right: 10px;
					}
				}
			}
		}
		}
	}
</style>
